<?xml version="1.0"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/resources/templates/content-template.xhtml">


    <ui:define name="example">
        <h:form>
            <icecore:singleSubmit/>
            <h:panelGrid columns="3">
                <h:outputLabel for="demoIn" vfalue="Selected Panel:"/>
                <h:selectOneRadio id="demoIn" value="#{stacking.selectedDemo}"
                                  required="true" layout="pageDirection">
                    <f:selectItems value="#{stacking.availableDemos}"/>
                </h:selectOneRadio>
                <h:message for="demoIn"/>
            </h:panelGrid>
        </h:form>

        <h:form>
            <ice:panelStack selectedPanel="#{stacking.selectedDemo}">
                <ice:panelGroup id="address">
                    <h:outputLink value="http://address.icefaces.org/" target="_blank">
                        <h:graphicImage library="css/images/stacking" name="#{stacking.selectedDemo}-demo.png" alt="#{stacking.selectedDescription}"/>
                        <br/>
                        <h:outputText value="The Address Form shows how a prototypical address form can be validated and updated on the fly using partial submits and without fully refreshing the browser page."/>
                    </h:outputLink>
                </ice:panelGroup>
                <ice:panelGroup id="auction">
                    <h:outputLink value="http://auctionmonitor.icefaces.org/" target="_blank">
                        <h:graphicImage library="css/images/stacking" name="#{stacking.selectedDemo}-demo.png" alt="#{stacking.selectedDescription}"/>
                        <br/>
                        <h:outputText value="The Auction Monitor simulates the tracking of live auctions and illustrates the following dynamic web application features; ticking clocks, real-time bid updates, dynamically rendered buttons, the ability to hide and show table rows on demand, and an integrated chat section."/>
                    </h:outputLink>
                </ice:panelGroup>
                <ice:panelGroup id="memory">
                    <h:outputLink value="http://memorygame.icefaces.org/" target="_blank">
                        <h:graphicImage library="css/images/stacking" name="#{stacking.selectedDemo}-demo.png" alt="#{stacking.selectedDescription}"/>
                        <br/>
                        <h:outputText value="The Memory Game demonstrates modern ICEfaces 1.8.2 approaches to writing a rich web application, including SessionRenderer, the DisposableBean interface, proper bean scoping, JSF component tree optimization, MVC design pattern, and more. The demo allows 2-6 users to play a game of Concentration against each other, or solo against computers. They can choose custom 'card decks', and then proceed to take turns flipping over pairs of cards to try to find matching images. Larger boards can make this game quite a test of your memory abilities as recalling where certain images are gives a significant advantage in future matching attempts."/>
                    </h:outputLink>
                </ice:panelGroup>
                <ice:panelGroup id="mobile">
                    <h:outputLink value="http://www.icefaces.org/main/demos/mobile-ajax.iface" target="_blank">
                        <h:graphicImage library="css/images/stacking" name="#{stacking.selectedDemo}-demo.png" alt="#{stacking.selectedDescription}"/>
                        <br/>
                        <h:outputText value="ICEfaces delivers mobile Ajax solutions today. These two mobile Ajax demos showcase why ICEfaces is well suited of enterprise mobile applications. To see these demos, and for more information on ICEfaces and mobile Ajax, click the demo link below."/>
                    </h:outputLink>
                </ice:panelGroup>
                <ice:panelGroup id="webmc">
                    <h:outputLink value="http://webmc.icefaces.org/" target="_blank">
                        <h:graphicImage library="css/images/stacking" name="#{stacking.selectedDemo}-demo.png" alt="#{stacking.selectedDescription}"/>
                        <br/>
                        <h:outputText value="WebMC is a basic web conferencing system that allows participants to share PowerPoint presentations over the web. WebMC uses ICEfaces built in Ajax-Push capabilities to deliver a collaborative web-based PowerPoint sharing experience."/>
                    </h:outputLink>
                </ice:panelGroup>
            </ice:panelStack>
        </h:form>
    </ui:define>
</ui:composition>